import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

import {HomeScreen} from '../screens/Home/HomeScreen';
import {MessageScreen} from '../screens/Message/MessageScreen';
import {MyScreen} from '../screens/My/MyScreen';
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import {SealScreen} from "../screens/Seal/SealScreen.tsx";
import {CreateSealScreen} from "../screens/Seal/CreateSealScreen.tsx";
import {MySealDetail} from "../screens/Seal/MySealDetail.tsx";
import {getFocusedRouteNameFromRoute} from "@react-navigation/native";
import {LeaveStackNavigator} from './LeaveStackNavigator';
import {DoneDetail} from "../screens/Seal/DoneDetail.tsx";
import {TodoDetail} from "../screens/Seal/TodoDetail.tsx";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeStack = () => {
    return (
        <Stack.Navigator screenOptions={{headerShown: false}}>
            <Stack.Screen name="HomeScreen" component={HomeScreen}/>
            <Stack.Screen name="SealScreen" component={SealScreen}/>
            <Stack.Screen name="CreateSealScreen" component={CreateSealScreen}/>
            <Stack.Screen name="MySealDetail" component={MySealDetail}/>
            <Stack.Screen name="DoneDetail" component={DoneDetail}/>
            <Stack.Screen name="TodoDetail" component={TodoDetail}/>
            <Stack.Screen name="LeaveList" component={LeaveStackNavigator} />
        </Stack.Navigator>
    );
};
export const MainTabNavigator = () => {
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                // 根据路由名称动态设置图标
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;

                    if (route.name === 'HomeTab') {
                        iconName = focused ? 'home' : 'home-outline';
                    } else if (route.name === 'MessagesTab') {
                        iconName = focused ? 'chatbubbles' : 'chatbubbles-outline';
                    } else if (route.name === 'MyTab') {
                        iconName = focused ? 'person-circle' : 'person-circle-outline';
                    }

                    // 返回图标组件
                    return <Icon name={iconName} size={size} color={color}/>;
                },
                // 设置 Tab 栏的激活和非激活颜色
                tabBarActiveTintColor: '#007AFF',
                tabBarInactiveTintColor: 'gray',
                // 隐藏每个 Tab 页面的顶部标题栏
                headerShown: false,
            })}
        >
            <Tab.Screen name="HomeTab" component={HomeStack} options={({route}) => ({
                title: '首页',
                tabBarStyle: ((route) => {
                    const routeName = getFocusedRouteNameFromRoute(route) ?? 'HomeScreen';
                    const hideTabBarRoutes = [
                        'SealScreen', 
                        'CreateSealScreen',
                        'MySealDetail',
                        'LeaveList',
                        'DoneDetail',
                        'TodoDetail'
                    ];
                    if (hideTabBarRoutes.includes(routeName)) {
                        return {display: 'none'};
                    }
                    return {};
                })(route),
            })}/>
            <Tab.Screen name="MessagesTab" component={MessageScreen} options={{title: '消息'}}/>
            <Tab.Screen name="MyTab" component={MyScreen} options={{title: '我的'}}/>
        </Tab.Navigator>
    );
};